<template>
  <div id="interviewerRecord" style="overflow: hidden;height: 100%;background-size: 100% 100%">
    <div style="margin-top: 4%;margin-bottom: 1%;">
      <el-date-picker
        v-model='params.params.searchStartTime'
        type='datetime'
        format='yyyy-MM-dd hh:mm'
        value-format="yyyy-MM-dd hh:mm"
        placeholder="选择开始日期时间">
      </el-date-picker>
      <el-date-picker
        v-model='params.params.searchEndTime'
        type='datetime'
        format='yyyy-MM-dd hh:mm'
        value-format="yyyy-MM-dd hh:mm"
        placeholder="选择结束日期时间">
      </el-date-picker>
      <el-button type="primary" @click="clickBtn">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </div>
    <!--<dy-table ref="table" height="80%" v-if="showTable"  :rows="tableData" loop :page-num="1" :page-size="2" :cols="tableCols" method="post" update/>-->
    <dy-table ref="table" height="70%" v-if="showTable"  url="Interviewer:GetInnerInfo" :params="params" loop :page-num="1" :page-size="5" :cols="tableCols" method="post" update/>
    <el-dialog
      title="提审会见详情"
      :visible.sync ="centerDialogVisible"
      width="25%"
      center>
      <div id="recordHtml" style="width: 100%;display: flex;flex-wrap: wrap">
        <div class="prisoner-line" style="width: 380px;height: 152px;" v-for ="(item,index) in recordLists" :key='index'  >
          <div class="prisoner-line-image" style="height: 150px;width: 145px;">
            <img width="145" :src="getPrisonerImg( item.dbiId )" :onerror="getDefaultImg(6) "/>
          </div>
          <div class="info-text">
            <div class="info-line">
              <div class="info-label">对象姓名：</div>
              <div class="info-value">{{item.name}}</div>
            </div>
            <div class="info-line">
              <div class="info-label">对象番号：</div>
              <div class="info-value">{{item.prisonInNo}}</div>
            </div>
            <div class="info-line">
              <div class="info-label">所在监室：</div>
              <div class="info-value">{{item.prisonRoomNo}}</div>
            </div>
            <div class="info-line">
              <div class="info-label">入所性质：</div>
              <div class="info-value">{{item.detentioninNatures}}</div>
            </div>
            <div class="info-line">
              <div class="info-label">开始时间：</div>
              <div class="info-value">{{item.beginTime}}</div>
            </div>
            <div class="info-line">
              <div class="info-label">结束时间：</div>
              <div class="info-value">{{item.endTime}}</div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import DyTable from '../components/common/DyTable'
import GetImage from '../mixins/GetImage'
export default {
  components: { DyTable },
  name: 'Inner',
  mixins: [GetImage],
  data () {
    return {
      showTable: false,
      tableLoading: true,
      tableData: [],
      tableCols: [],
      params: {
        params: {
          searchStartTime: '',
          searchEndTime: ''
        }
      },
      centerDialogVisible: false,
      recordLists: []
    }
  },
  methods: {
    getTbDatas () {
      this.showTable = false
      let visitorTypes /** 人员类型 **/
      let rooms /** 房间号 **/
      /** 根据时间查询所有主记录 **/
      this.$http.REQUEST({
        /** 查询所有房间 **/
        path: 'Interviewer:GetRooms',
        method: 'POST',
        params: {}
      }).then(res => {
        rooms = res.data.rows
        return this.$http.REQUEST({
          /** 查询人员类型 **/
          path: 'Interviewer:GetVisirtorTypes',
          method: 'POST',
          params: {}
        })
      }).then(res => {
        visitorTypes = res.data.rows
        this.$nextTick(() => {
          this.$set(this, 'tableCols', [{
            label: 'id',
            prop: 'id',
            hidden: true
          }, {
            label: '访客照片',
            template: v => {
              return `<img width="80px" height="80px" src="${this.getVisitorImg(v.picpath)}" onerror="${this.getDefaultImg(v.typeId)}"/>`
            }
          }, {
            label: '访客姓名',
            template: v => {
              return `<div style="background-color: teal;border-radius: 4px;width: 80px;line-height: 30px;text-align: center;color: #eee">${v.name}</div>`
            }
          }, {
            label: '访客类型',
            template: v => {
              const type = visitorTypes.find(t => t.id === v.typeId)
              const color = {
                3: '#67c23a',
                4: '#409eff',
                5: 'royalblue'
              }
              return `<div style="background-color: ${color[type.id]};border-radius: 4px;width: 80px;line-height: 30px;text-align: center;color: #eee">${type.name}</div>`
            }
          }, {
            label: '采访类型',
            template: v => {
              const type = v.type ? '会见' : '提审'
              const color = v.type ? '#67c23a' : '#409eff'
              return `<div style="background-color: ${color};border-radius: 4px;width: 60px;line-height: 30px;text-align: center;color: #eee">${type}</div>`
            }
          }, {
            label: '房间号',
            template: v => {
              const colors = {
                1: ['deepskyblue', '#2196f3', 'dodgerblue'],
                2: ['#32cd77', '#32cda9', '#32cdbf'],
                3: ['#41ade1', '#4181e1', 'royalblue'],
                4: ['dodgerblue', '#32abcd', '#32cdbf'],
                5: ['#41cbe2', '#41a8e1', 'royalblue']
              }
              const room = rooms.find(r => r.ardId === v.roomId)
              let color = null
              if (room) {
                color = `linear-gradient(141deg, ${colors[room.type][0]} 0%,${colors[room.type][1]}  51%, ${colors[room.type][2]} 75%)`
              }
              if (color) {
                return `<div style="background-image: ${color};border-radius: 4px;width: 60px;line-height: 30px;text-align: center;color: #eee;font-weight: bold;font-size: 18px;">${room.number}</div>`
              } else {
                return '<div style="background-color: dimgrey;border-radius: 4px;width: 60px;line-height: 30px;text-align: center;color: #eee;font-size: 16px;">无</div>'
              }
            }
          }, {
            label: '操作',
            operations: [{
              label: '详情',
              type: 'info',
              icon: 'el-icon-tickets',
              handler: this.searchRecord
            }]
          }
          ])
        })
        this.tableLoading = false
        this.showTable = true
      })
    },
    clickBtn () {
      this.getTbDatas()
    },
    reset () {
      this.params.params.searchStartTime = ''
      this.params.params.searchEndTime = ''
      this.getTbDatas()
    },
    /**
     * 查看提审会见记录详情
     */
    searchRecord (record) {
      this.$http.POST('Interviewer:GetInnerMeetingRecord', {
        id: record.id
      }).then(res => {
        this.recordLists = res.data.data
        this.centerDialogVisible = true
      })
    }
  },
  created () {
    this.getTbDatas()
  }
}
</script>

<style scoped>
  [data-v-22498785] .el-table thead {
    color: white!important;
  }
  #interviewerRecord{
    background-image: url('../assets/Arraign/img/bg.png');
  }
  #interviewerRecord .prisoner-line{
    width: 300px;
    margin-left: 20px;
    margin-top: 20px;
    border: 1px solid teal;
    border-radius: 5px;
    box-shadow: 5px 5px 5px teal;
    height: 152px;
    overflow: hidden;
    display: flex;
  }
  #interviewerRecord .prisoner-line-image{
    height: 130px;
    width: 150px;
  }
  #interviewerRecord .prisoner-line:nth-last-child(1){
    margin-bottom: 20px;
  }
  #interviewerRecord .info-line{
    display: flex;
    font-size: 18px;
    color: #333;
    margin-top: 5px;
    border-bottom: 1px solid #eee;
  }
  #interviewerRecord .prisoner-line .info-line{
    font-size: 14px;
    margin-top: 4px;
  }
  #interviewerRecord .info-line > .info-label{
    width: 100px;
    text-indent: 10px;
  }
  #interviewerRecord .prisoner-line .info-label{
    width: 80px;
  }
</style>
